<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
            margin: 0;
        }

        .advb {
            background-color: rgb(52, 50, 50);
            width: 100%;
            height: 100%;
            position: relative;
        }

        .adv {
            width: 45%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .top,
        .nus {
            width: 100%;
            display: block;
        }

        .nusfixed {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;

        }

        .im {
            width: 160px;
            height: 250px;
            margin-left: 0;
        }


        .buss {
            height: 250px;
            width: 800px;
            display: flex;
            align-items: center;
            margin: 0 auto;
        }


        .im:hover {
            width: 170px;
            height: 260px;
            cursor: pointer;
        }

        .ding {
            position: fixed;
            right: 30px;
            bottom: 70px;
        }
    </style>
</head>

<body style="background-color: antiquewhite;">
    <img class="top" src="./image/顶部图.png" alt="">
    <img class="nus" src="./image/导航栏.png" alt="">
    <div class="advb">
        <img src="./image/广告.png" alt="" class="adv">
    </div>
    <div class="buss">
        <a href="./商品页面.html"><img class="im" src="./image/商品1.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品2.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品3.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品4.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品5.png" alt=""></a>
    </div>
    <div class="buss">
        <a href="./商品页面.html"><img class="im" src="./image/商品1.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品2.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品3.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品4.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品5.png" alt=""></a>
    </div>
    <div class="buss">
        <a href="./商品页面.html"><img class="im" src="./image/商品1.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品2.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品3.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品4.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品5.png" alt=""></a>
    </div>
    <div class="buss">
        <a href="./商品页面.html"><img class="im" src="./image/商品1.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品2.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品3.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品4.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品5.png" alt=""></a>
    </div>
    <div class="buss">
        <a href="./商品页面.html"><img class="im" src="./image/商品1.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品2.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品3.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品4.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品5.png" alt=""></a>
    </div>
    <div class="buss">
        <a href="./商品页面.html"><img class="im" src="./image/商品1.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品2.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品3.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品4.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品5.png" alt=""></a>
    </div>
    <div class="buss">
        <a href="./商品页面.html"><img class="im" src="./image/商品1.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品2.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品3.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品4.png" alt=""></a>
        <a href="./商品页面.html"><img class="im" src="./image/商品5.png" alt=""></a>
    </div>
    <a class="ding" href="#"><img src="./image/置顶.png" alt=""></a>
    <script>
        setTimeout(() => {
            document.querySelector(".advb").remove();
        }, 10);

        // 获取元素高度
        const topBar = document.querySelector('.top');
        const navBar = document.querySelector('.nus');
        const topBarHeight = topBar.offsetHeight; // 获取top栏的实际高度

        window.addEventListener('scroll', () => {
            if (window.scrollY > topBarHeight) {
                navBar.classList.add('nusfixed'); // 添加fixed类
            } else {
                navBar.classList.remove('nusfixed'); // 移除fixed类
            }
        });
    </script>

</body>

</html>